<template>
  <van-nav-bar
    left-arrow
    fixed
    :placeholder="!isTop"
    :class="{ opacity: isTop }"
  >
    <template #title>
      <van-tabs
        style="width: 350px; max-width: 100%"
        @click-tab="changeTab"
        v-model:active="activeIndex"
      >
        <van-tab class="qwe" title="商品" index="0"> </van-tab>
        <van-tab title="详情" index="1"> </van-tab>
        <van-tab title="评价" index="2"> </van-tab>
      </van-tabs>
    </template>
  </van-nav-bar>

  <div class="nav">
    <div class="nav-job">
      <div class="qwe">
        <van-swipe
          class="my-swipe"
          style="width: 100%"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item v-for="item in goodsInfo.goods_banner_imgs">
            <img :src="item" alt="" />
          </van-swipe-item>
        </van-swipe>

        <div class="wenzi">
          {{ goodsInfo.name }}
        </div>
        <br /><br /><br /><br />
        <div v-for="item in goodsInfo.spec_list">
          <h1>{{ item.name }} -- {{ item.active }}</h1>
          <button
            v-for="(item2, index2) in item.list"
            :class="{ red: item.active === index2 }"
            @click="item.active = index2"
          >
            {{ item2.name }}
          </button>
        </div>

        {{ selectSku }}

        <hr />
        {{ activeSku }}
        <br />
        <br /><br /><br />

        <div class="aaa">
          <div class="jiage">
            <span>￥19.00</span>
            <span>会员价：¥149</span>
          </div>
          <div class="aaaa">月销量3000件</div>
        </div>
        <div class="yunfei">
          <div>运费</div>
          <div>包邮</div>
        </div>
        <div class="yunfei">
          <div>规格</div>
          <div>></div>
        </div>
        <div class="yunfei">
          <div>库存</div>
          <div>1000件</div>
        </div>
      </div>

      <!--  详情 -->
      <div class="zhaopian" ref="detail">
        <img :src="item" alt="" v-for="item in goodsInfo.goods_detail_imgs" />
      </div>

      <!--    评价  -->
      <div class="eval-box" ref="evaldom">
        <div class="pinjia">
          <div>用户评价（74）</div>
        </div>
        <div class="eval-item">
          <div class="evaluation">
            <div class="evaluation-title">
              <img src="../../assets/images/123.webp" alt="" />
            </div>
            <div class="xing">
              <span>1*****9</span>
              <div>🌟 🌟 🌟 🌟 🌟</div>
            </div>
            <div class="riqi">
              <div>2018-05-13 15:32</div>
            </div>
          </div>
          <div class="wenzi-job">
            <span
              >我的柜子里有好多用到一半就搁置的洗发水，对于我这种一旦拥有新东西就必须先拆先感受的宝宝，昨晚马上就试了，护发素的味道那简直叫香气四溢，满屋子的香味！早上头发很顺滑！方圆一米之内萦绕香气！哈哈！</span
            >
          </div>
          <div class="tu">
            <img src="../../assets/images/29.png" alt="" />
            <img src="../../assets/images/29.png" alt="" />
            <img src="../../assets/images/29.png" alt="" />
          </div>
        </div>

        <div class="eval-item">
          <div class="evaluation">
            <div class="evaluation-title">
              <img src="../../assets/images/123.webp" alt="" />
            </div>
            <div class="xing">
              <span>1*****9</span>
              <div>🌟 🌟 🌟 🌟 🌟</div>
            </div>
            <div class="riqi">
              <div>2018-05-13 15:32</div>
            </div>
          </div>
          <div class="wenzi-job">
            <span
              >我的柜子里有好多用到一半就搁置的洗发水，对于我这种一旦拥有新东西就必须先拆先感受的宝宝，昨晚马上就试了，护发素的味道那简直叫香气四溢，满屋子的香味！早上头发很顺滑！方圆一米之内萦绕香气！哈哈！</span
            >
          </div>
          <div class="tu">
            <img src="../../assets/images/30.png" alt="" />
            <img src="../../assets/images/30.png" alt="" />
            <img src="../../assets/images/30.png" alt="" />
          </div>
        </div>

        <div class="quanbu">
          <div>查看全部评价</div>
        </div>
      </div>

      <!--  评价结束 -->
    </div>
  </div>

  <div class="kefu">
    <van-action-bar class="kefu">
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon
        icon="cart-o"
        @click="navTo('/cart')"
        text="购物车"
      />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button
        type="warning"
        @click="addCart"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
import { onActivated, reactive, ref } from "vue";
import { getGoodsInfo as getGoodsInfoApi } from "@/api/goods";
import { onMounted } from "vue";
import { computed } from "vue";
const goodsInfo = ref({});
const isTop = ref(true); //  顶部
const detail = ref(null); // 获取到页面上 ref叫detail的元素的引用
const evaldom = ref(null); // 获取到页面上 ref叫eval的元素的引用
const positionArr = ref([0]);
const activeIndex = ref(0); //  tabs栏默认的索引
import { showToast } from "vant";
import { addCart as addCartApi } from "@/api/cart";

//  点击头部栏

function changeTab(e) {
  console.log(e.name);

  window.scrollTo({
    top: positionArr.value[e.name],
    behavior: "smooth",
  });

  // if (e.name == 0) {
  //   window.scrollTo({
  //     top: positionArr.value[0],
  //     behavior: "smooth",
  //   });
  // }

  // if (e.name == 1) {
  //   window.scrollTo({
  //     top: positionArr.value[1],
  //     behavior: "smooth",
  //   });
  // }
  // if (e.name == 2) {
  //   window.scrollTo({
  //     top: positionArr.value[2],
  //     behavior: "smooth",
  //   });
  // }
}

onMounted(() => {
  window.onscroll = function (e) {
    let top = document.documentElement.scrollTop;
    if (top >= 100) {
      isTop.value = false;
    } else {
      isTop.value = true;
    }

    //

    for (let i = 0; i < positionArr.value.length - 1; i++) {
      let item = positionArr.value[i];
      //  大于当前的 但是比下一个小
      // 0  100  876 900  3000  无限大
      if (top >= item && top < positionArr.value[i + 1]) {
        activeIndex.value = i;
        break;
      }
    }
  };

  getGoodsInfo();
});

// 计算属性 通过specList里的选中值  得到选中的sku数据

let selectSku = computed(() => {
  let result = [];
  if (!goodsInfo.value.spec_list) return [];
  goodsInfo.value.spec_list.forEach((element) => {
    if (element.active != -1) {
      result.push(element.list[element.active].name);
    } else {
      result.push(null);
    }
  });

  return result;
});

//  当前选中的sku商品信息
let activeSku = computed(() => {
  if (selectSku.value.length === 0 || selectSku.value.includes(null)) return {};

  return goodsInfo.value.sku_list.find((v) => {
    return selectSku.value.every((v2) => v.sku_name_arr.includes(v2));
  });
});

function getGoodsInfo(params) {
  getGoodsInfoApi({
    _id: route.query.id,
  }).then((res) => {
    console.log(res);
    res.info.spec_list = res.info.spec_list.map((v) => {
      v.active = -1;
      return v;
    });
    goodsInfo.value = res.info;

    // 页面的数据渲染以后才知道

    setTimeout(() => {
      // console.log(detail.value.getBoundingClientRect());
      console.log(detail.value.offsetTop);

      positionArr.value.push(detail.value.offsetTop);
      positionArr.value.push(evaldom.value.offsetTop);
      positionArr.value.push(Infinity);
    }, 1000);
  });
}

//  addCart

function addCart() {
  if (!activeSku.value._id) {
    showToast("请先选择属性");
    return;
  }

  console.log();

  let {
    _id: sku_id,
    sku_name,
    image,
    price,
    stock,
    goods_id,
    goods_name,
    action_checked = true,
    buy_num = 1,
  } = activeSku.value;

  addCartApi({
    sku_id,
    sku_name,
    image,
    price,
    stock,
    goods_id,
    goods_name,
    action_checked,
    buy_num,
  }).then((res) => {
    console.log(res);
    //  加入成功以后
    // 让菠萝cart模块更新

    // cartStore.getCart();
  });
}
</script>
<style scoped>
.qwe {
  margin-left: 5px;
}
.qweqwe {
  position: relative;
  bottom: 27px;
  left: 15px;
}
.tupian img {
  width: 360px;
  height: 375px;
}
.wenzi {
  padding: 15px 0;
}
.jiage span {
  color: #f00;
}
.jiage span:nth-child(2) {
  padding: 0 10px;
  color: #ccc;
}
.aaa {
  display: flex;
  justify-content: space-between;
}
.aaaa {
  padding: 5px 10px;
}
.yunfei {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e4e4e4;
  margin-right: 20px;
}
.evaluation {
  display: flex;
  padding: 5px 0;
  margin-right: 5px;
}
.evaluation-title img {
  width: 60px;
  height: 60px;
}
.xing {
  margin-top: 15px;
  margin-left: 10px;
}
.riqi {
  margin-top: 10px;
  margin-left: 50px;
}
.quanbu {
  width: 130px;
  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid #f4f4f4;
  color: #949494;
}
.wenzi-job {
  margin-right: 10px;
}
.wenzi-job span {
  /* border: 1px solid #000; */
  font-size: 14px;
}
.kefu {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.my-swipe img {
  width: 100%;
}
.red {
  color: red;
}
.van-nav-bar__title {
  max-width: 100%;
  margin: 0;
}

.nav {
  width: 100%;
  overflow: hidden;
  padding-bottom: 50px;
}
.opacity {
  opacity: 0;
}
.zhaopian {
  line-height: 0;
}
.zhaopian img {
  width: 100%;
  height: auto;
}
</style>
